<template>
  <div class="area-select">
    <span class="select-title"> 区域 </span>
    <el-cascader
      ref="cascader"
      :value="areaIds"
      :options="areaOptions"
      :show-all-levels="true"
      :props="{ checkStrictly: true, value: 'id', label: 'name' }"
      @change="areaChange"
    />
    <!-- clearable -->
  </div>
</template>

<script>
import { commonArea } from '@/api/mapBase';

export default {
  data () {
    return {
      areaOptions: []
    };
  },
  computed: {
    areaIds () {
      return JSON.parse(this.$store.getters.areaIds);
    }
  },
  created () {
    commonArea().then((res) => {
      if (res.code === 200) {
        this.areaOptions = res.data;
        // code: "330000"
        // id: 1
        // level: 0
        // name: "浙江省"
        // pid: 0
      }
    });
  },
  methods: {
    areaChange (v) {
      const nodesObj = this.$refs.cascader.getCheckedNodes();
      this.$store.commit('pages/SET_AD_IDS', JSON.stringify(v));
      this.$store.commit('pages/SET_AD_CODE', nodesObj[0].data.code);
    }
  }
};
</script>

<style lang="less">
.area-select {
  margin-left: 30px;
  margin-top: 8px;
  .select-title {
    margin-right: 15px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #458ffc;
  }
  .el-cascader .el-input__inner {
    background-color: transparent;
    border-color: #3a80b7;
    border-radius: 0;
    width: 200px;
  }
}
.el-scrollbar__wrap.el-scrollbar__wrap {
  overflow: auto;
}
.el-scrollbar {
  .el-cascader-menu__list {
    .el-cascader-node:not(.is-disabled):focus,
    .el-cascader-node:not(.is-disabled):hover {
      background: #0a23468a;
    }
  }
}
.el-cascader__dropdown .el-cascader-panel .el-cascader-menu{
  min-height: 45px;
}
.el-cascader__dropdown {
  &.el-cascader__dropdown {
    border-color: #3a80b7;
    background-color: #3a80b7;
  }
  .el-cascader-panel .el-cascader-menu {
    color: #fff;
  }
}
</style>
